<div id="photo-large">
    <img src="<?php echo BASE_PATH."/photos/" . $photo["Photo"]["filename"]; ?>" alt="" />
</div>
<div id="photo-info">
    <p class="bold"><?php echo $photo["Photo"]["title"]; ?></p>
    <p><?php echo $photo["Photo"]["description"]; ?></p>
    <p><span class="bold">Category:</span> <?php echo $photo["Photo"]["category"]; ?></p>
    <p><span class="bold">Date Taken:</span> <?php echo $photo["Photo"]["date_taken"]; ?></p>
    <p>
        <span class="bold">Rating:</span> <?php echo $photo["Photo"]["rating"]; ?>
        <?php if ($this->session->get("authenticated") && ($photo["Photo"]["author_user_id"] != $this->session->get("user_id"))): ?>
        <a href="<?php echo BASE_PATH; ?>/photos/rate/decrement/<?php echo $photo["Photo"]["id"]; ?>">-1</a>
        /
        <a href="<?php echo BASE_PATH; ?>/photos/rate/increment/<?php echo $photo["Photo"]["id"]; ?>">+1</a>
        <?php endif ?>
    </p>
    <p>
        <?php
            if(count($tags) != 0): ?>
                <span class="bold">In This Photo:</span><br/>
        <?php
                foreach($tags as $tag): ?>
                    <a class="user_tag" href="<?php echo BASE_PATH; ?>/users/view/<?php echo $tag['Tag']['user_id']; ?>"><?php echo $tag['User']['name']; ?></a><br/>
        <?php   endforeach;
            else: ?>
        <span class="bold">In This Photo:</span>  No One<br/>
        <?php endif; ?>
    </p>
    <?php if (($this->session->get("authenticated") && ($photo["Photo"]["author_user_id"] == $this->session->get("user_id"))) || $this->session->get("role_id") == '1'): ?>
    <p>
        <a href="<?php echo BASE_PATH; ?>/photos/edit/<?php echo $photo["Photo"]["id"]; ?>">(edit)</a>
        <a href="<?php echo BASE_PATH; ?>/photos/delete/<?php echo $this->session->get("user_id"); ?>/<?php echo $photo["Photo"]["id"]; ?>">(delete)</a>
    </p>
    <?php endif ?>
    <?php if ($this->session->get("authenticated") && ($photo["Photo"]["author_user_id"] == $this->session->get("user_id"))): ?>
    <p><a href="<?php echo BASE_PATH; ?>/users/set_photo/<?php echo $this->session->get("user_id"); ?>/<?php echo $photo["Photo"]["id"]; ?>">(set as display picture)</a></p>
    <?php endif ?>
</div>
<div class="clear"></div>
<div id="photo-comments" class="section">
    <h1>Comments</h1>
    <div id="photo-comments-container">
    </div>
</div>
<a id="loadmore" href="#" style="display: none" onclick="load_more_comments(); return false;"><div id="loadmore-message" class="loadmore">Load more</div></a>
<?php if ($this->session->get("authenticated") && $photo["Photo"]["comment_rule"] == 1): ?>
<div id="photo-addcomment" class="section">
    <h1>Add Comment</h1>
    <form onsubmit="return send_photo_comment(this);">
        <fieldset>
            <label for="content">Comment:</label>
            <textarea cols="" rows="" name="photo_comment" id="photo_comment"></textarea><br />
            <input type="hidden" id="author_user_id" name="author_user_id" value="<?php echo $this->session->get("user_id"); ?>" />
            <input type="submit" name="submit" id="submit" value="Submit" />
        </fieldset>
    </form>
</div>
<?php endif ?>
<script type="text/javascript">
    var page = 1;

    load_comments();
    
    function load_comments() {
        page = 1;

        biji.select("#photo-comments-container").innerHTML = '<img src="<?php echo BASE_PATH; ?>/img/loading.gif" alt="" />';

        biji.load("<?php echo BASE_PATH; ?>/photos/get_comments/<?php echo $photo["Photo"]["id"]; ?>/" + page, function(data) {
            if (data != '') {
                biji.select("#loadmore").style.display = 'inline';
                biji.select("#photo-comments-container").innerHTML = data;
            } else {
                biji.select("#photo-comments-container").innerHTML = "No comment";
            }
        });
    }

    function load_more_comments() {
        ++page;

        biji.select("#loadmore-message").innerHTML = '<img src="<?php echo BASE_PATH; ?>/img/loading.gif" alt="" />';

        biji.load("<?php echo BASE_PATH; ?>/photos/get_comments/<?php echo $photo["Photo"]["id"]; ?>/" + page, function(data) {
            if (data == '') {
                biji.select("#loadmore").style.display = 'none';
            } else {
                biji.select("#loadmore").style.display = 'inline';
                biji.select("#photo-comments-container").innerHTML += data;
            }

            biji.select("#loadmore-message").innerHTML = 'Load more';
        });
    }

    function delete_comment(photo_id, comment_id) {
        biji.load("<?php echo BASE_PATH; ?>/photos/comment/delete/" + photo_id + "/" + comment_id, function() {
            load_comments();
        });
    }

    function send_photo_comment(form) {
        if (validate_photo_comment(form)) {
            add_comment("<?php echo $photo["Photo"]["id"]; ?>");
        }

        return false;
    }

    function add_comment(photo_id) {
        var author_user_id = biji.select("#author_user_id").value;
        var photo_comment = biji.select("#photo_comment").value;

        biji.load("<?php echo BASE_PATH; ?>/photos/comment/add/" + photo_id + "?author_user_id=" + author_user_id + "&photo_comment=" + escape(photo_comment), function() {
            load_comments();
            biji.select("#photo_comment").value = '';
        }, "post");
    }
</script>